<template>
    <div style="width: 90%;margin-left: 5%;height: 100vh;overflow-y: scroll;background: transparent;">

   


        <el-row>
            <el-col :span="6" v-for="(item, index) in giteeList" :key="index">

                <div class="card">
                    <div class="top-section">
                        <div class="border" style="border: 0px;"></div>
                        <div class="icons">
                            <div class="logo">
                                <!-- <svg class="svg" viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z"
                                        fill="white"></path>
                                    <path
                                        d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z"
                                        fill="white"></path>
                                    <path
                                        d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z"
                                        fill="white"></path>
                                </svg> -->
                                <img :src="item.assigner.avatar_url" />
                            </div>
                            <div class="social-media">
                                <a :href="item.html_url" target="_blank">
                                <svg class="svg" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z">
                                    </path>
                                </svg>
                            </a>
                               
                            </div>
                        </div>
                    </div>
                    <div class="bottom-section">
                        <span class="title">{{ item.name }}</span>
                        <span class="title">{{ item.human_name.split('/')[0] }}</span>
                        <div class="row row1">
                            <el-popover placement="bottom" :width="400" trigger="click">
                                <template #reference>
                                    <div class="item">
                                        <span class="big-text">{{ item.commits && item.commits.length }}</span>
                                        <span class="regular-text">commits</span>
                                    </div>
                                </template>

                                <el-timeline style="max-width: 600px;height: 600px;overflow: scroll;">
                                    <el-timeline-item v-for="(activity, index) in item.commits" :key="index"
                                        color="#0bbd87"
                                        :timestamp="moment(activity.commit.committer.date).format('YYYY-MM-DD HH:mm:ss')">
                                        {{ activity.commit.message }}
                                    </el-timeline-item>
                                </el-timeline>
                            </el-popover>
                            <div class="item">
                                <span class="big-text" v-if="item.branches && item.branches.length > 1">{{ item.branches
                                    && item.branches.length
                                    }}</span>
                                <span class="big-text" v-else-if="item.branches && item.branches.length > 0">{{
                                    item.branches[0].name}}</span>
                                <span class="regular-text">branches</span>
                            </div>
                            
                            <div class="item">
                                <span class="big-text">{{ item.events && item.events.length }}</span>
                                <span class="regular-text">events</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import ax from '@/helper/axios.js'
import { ElMessage } from 'element-plus'
import config from "@/config"
import moment from 'moment';

moment.locale('zh-cn');
const loading = ref(true)
loading.value = false;

const giteeList = ref([])
function getGiteeData() {
    ax.get(`/gitee/user/repos?access_token=${config.giteeToken}&sort=full_name&page=1&per_page=20`).then(res => {
        console.log(res);
        giteeList.value = res;
        giteeList.value.forEach(item => {
            ax.get(`/gitee/repos/${item.namespace.path}/${item.path}/commits?access_token=${config.giteeToken}&page=1&per_page=100`).then(res2 => {

                item.commits = res2;
            });
            ax.get(`/gitee/repos/${item.namespace.path}/${item.path}/branches?access_token=${config.giteeToken}`).then(res3 => {

                item.branches = res3;
            });
            ax.get(`/gitee/repos/${item.namespace.path}/${item.path}/events?access_token=${config.giteeToken}&page=1&per_page=100`).then(res4 => {

                item.events = res4;
            });
        });
    }).catch(err => {
        console.log(err);
    });
}
getGiteeData();

onMounted(() => { 

});
</script>
<style scoped lang="less">
/* From Uiverse.io by adamgiebl */
.card {
    width: 280px;
    border-radius: 20px;
    background: #1b233d;
    padding: 5px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 20px
}

.card:hover {
    transform: scale(1.05);
}

.card .top-section {
    height: 120px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);
    position: relative;
}

.card .top-section .border {
    border-bottom-right-radius: 10px;
    height: 30px;
    width: 130px;
    background: white;
    background: #1b233d;
    position: relative;
    transform: skew(-40deg);
    box-shadow: -10px -10px 0 0 #1b233d;
}

.card .top-section .border::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    right: -15px;
    background: rgba(255, 255, 255, 0);
    border-top-left-radius: 10px;
    box-shadow: -5px -5px 0 2px #1b233d;
}

.card .top-section::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    background: rgba(255, 255, 255, 0);
    height: 15px;
    width: 15px;
    border-top-left-radius: 15px;
    box-shadow: -5px -5px 0 2px #1b233d;
}

.card .top-section .icons {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.card .top-section .icons .logo {
    height: 100%;
    aspect-ratio: 1;
    padding: 7px 0 7px 15px;
}

.card .top-section .icons .logo .top-section {
    height: 100%;
}

.card .top-section .icons .social-media {
    height: 100%;
    padding: 8px 15px;
    display: flex;
    gap: 7px;
}

.card .top-section .icons .social-media .svg {
    height: 100%;
    fill: #1b233d;
}

.card .top-section .icons .social-media .svg:hover {
    fill: white;
}

.card .bottom-section {
    margin-top: 15px;
    padding: 10px 5px;
}

.card .bottom-section .title {
    display: block;
    font-size: 17px;
    font-weight: bolder;
    color: white;
    text-align: center;
    letter-spacing: 2px;
}

.card .bottom-section .row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.card .bottom-section .row .item {
    flex: 30%;
    text-align: center;
    padding: 5px;
    color: rgba(170, 222, 243, 0.721);
}

.card .bottom-section .row .item .big-text {
    font-size: 12px;
    display: block;
    color: white;
    font-weight: 700;
}

.card .bottom-section .row .item .regular-text {
    font-size: 9px;
}

.card .bottom-section .row .item:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.126);
    border-right: 1px solid rgba(255, 255, 255, 0.126);
}
</style>